<template>
  <div class="sigbut">
    <div class="tip">{{ label }}</div>
    <div class="left-bu">
      <a-button size="small" @click="clear">清空</a-button>
      <a-button size="small" type="primary" @click="ok" :disabled="!showSign">确认</a-button>
    </div>
  </div>
  <div class="online-sign">
    <vue-esign
      :value="value"
      v-if="showSign"
      ref="esign"
      :width="width"
      :height="height"
      :is-crop="isCrop"
      :line-width="lineWidth"
      :line-color="darkColor"
      :bg-color="lightColor"
      style="flex: 1"
    />
    <img
      :src="resultImg"
      alt=""
      v-if="!showSign"
      class="sign-img"
      :style="{ width: !!width ? width + 'px' : '100%' }"
    />
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import vueEsign from 'vue-esign';
  export default defineComponent({
    name: 'esign-view',
    components: { vueEsign },
    props: {
      value: {
        required: true,
        type: [String],
        default: '',
      },
      label: {
        type: String,
        required: true,
        default: '',
      },
      width: {
        required: true,
        type: Number,
        default: 800,
      },
      height: {
        required: true,
        type: Number,
        default: 300,
      },
      lineWidth: {
        required: true,
        type: Number,
        default: 4,
      },
      darkColor: {
        required: true,
        type: String,
        default: '#000000',
      },
      lightColor: {
        required: true,
        type: String,
        default: '#ffffff',
      },
      isCrop: {
        required: true,
        type: Boolean,
        default: false,
      },
    },
    emits: ['clear', 'ok'],
    data() {
      return {
        resultImg: '',
        showSign: true,
      };
    },
    watch: {
      value(val: string) {
        if (!!val) {
          this.showSign = false;
          this.resultImg = val;
        } else {
          this.showSign = true;
        }
      },
    },
    created() {
      if (!!this.value) {
        this.showSign = false;
        this.resultImg = this.value;
      } else {
        this.showSign = true;
      }
    },
    methods: {
      // 清空画布
      clear() {
        this.resultImg = '';
        this.showSign = true;
        this.$nextTick(() => {
          (this.$refs.esign as any).reset();
          this.$emit('clear', '');
        });
      },
      // 确认签名
      ok() {
        (this.$refs.esign as any)
          .generate()
          .then((res: string) => {
            if (res) {
              this.showSign = false;
              this.resultImg = res;
              this.$emit('ok', this.resultImg);
            }
          })
          .catch(() => {
            abp.notify.warn('请签名');
          });
      },
    },
  });
</script>

<style lang="less" scoped>
  .sigbut {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #606266;
    padding: 8px;
    border: 1px solid #d9d9d9;
    .left-bu {
      display: flex;
      align-items: center;
      .clear-bu,
      .sure {
        margin-left: 5px;
      }
    }
  }
  .online-sign {
    border: 1px solid #d9d9d9;
    border-top: 0;
    height: auto;
    padding-top: 10px;
    padding: 10px;
    display: flex;
  }
  .sign-img {
    flex: 1;
  }
</style>
